<template>
	<loading v-if="isLoading" style="height: 70vh;"></loading>
	<view class="empty" v-else-if="!userInfo">
		<image
			src="https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2025/02/a0c4966b-11af-4c87-93aa-359f9c03d89f83ee61eba8e363790692eb5fd8a98de7.png"
			mode="widthFix"></image>
		<text>这里空空荡荡，啥也没有留下</text>
	</view>
	<view v-else>
		<tn-form :model="userInfo" ref="formRef" :rules="formRules" label-position="top">
			<tn-form-item label="商家名称" prop="seller_name">
				<tn-input v-model="userInfo.seller_name" placeholder="请输入商家名称" clearable />
			</tn-form-item>
			<tn-form-item label="主体名称" prop="main_name">
				<tn-input v-model="userInfo.main_name" placeholder="请输入主体名称" clearable />
			</tn-form-item>
			<tn-form-item label="联系人员" prop="contact_name">
				<tn-input v-model="userInfo.contact_name" placeholder="请输入联系人员名称" clearable />
			</tn-form-item>
			<tn-form-item label="联系电话" prop="contact_tel">
				<tn-input type="digit" v-model="userInfo.contact_tel" placeholder="请输入联系电话" clearable />
			</tn-form-item>
			<tn-form-item label="社会信用代码">
				<tn-input v-model="userInfo.credit_code" placeholder="请输入社会信用代码" clearable />
			</tn-form-item>
			<tn-form-item label="商家地址" prop="address">
				<tn-input v-model="userInfo.address" placeholder="请输入商家地址" clearable />
			</tn-form-item>
			<tn-form-item label="经度" prop="longitude">
				<tn-input type="number" v-model="userInfo.longitude" placeholder="请输入地理经度" clearable />
			</tn-form-item>
			<tn-form-item label="纬度" prop="latitude">
				<tn-input type="number" v-model="userInfo.latitude" placeholder="请输入地理纬度" clearable />
			</tn-form-item>
			<tn-form-item label="门头" prop="seller_image">
				<tn-image-upload v-model="userInfo.seller_image" :action="actionUrl"
					:custom-upload-callback="uploadHandle" :limit="1" :show-error-tips="false" />
			</tn-form-item>
			<tn-form-item label="资质证书" prop="cert_list">
				<tn-image-upload v-model="userInfo.cert_list" :action="actionUrl" :custom-upload-callback="uploadHandle"
					:limit="3" :show-error-tips="false" />
			</tn-form-item>
			<tn-form-item label="手持身份证" prop="hand_card">
				<tn-image-upload v-model="userInfo.hand_card" :action="actionUrl" :custom-upload-callback="uploadHandle"
					:limit="1" :show-error-tips="false" />
			</tn-form-item>
		</tn-form>
		<view class="tn-flex-center">
			<tn-button size="lg" width="80vw" height="80" font-size="26" @click="submitForReview">确定修改</tn-button>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
	} from 'vue'
	import {
		getUserDetailApi
	} from "@/request/worktop/merchant.js"
	import {
		base_url,
		domain_name,
		uploadHandle
	} from "@/request/index.js"

	onMounted(() => {
		userInfo.value.id = props.userId
		getUserDetail()
	})

	const props = defineProps(['userId'])

	const actionUrl = base_url + '/index/upload'
	const isLoading = ref(true)
	const userInfo = ref({
		id: 0,
		seller_name: '',
		seller_image: '',
		main_name: '',
		contact_name: '',
		contact_tel: '',
		cert_list: [],
		hand_card: '',
		credit_code: '',
		address: '',
		longitude: '',
		latitude: ''
	})
	// 规则
	const formRules = {
		seller_name: [{
			required: true,
			message: '请输入商家名称',
			trigger: ['change', 'blur']
		}],
		main_name: [{
			required: true,
			message: '请输入主体名称',
			trigger: ['change', 'blur']
		}],
		contact_name: [{
			required: true,
			message: '请输入联系人员名称',
			trigger: ['change', 'blur']
		}],
		address: [{
			required: true,
			message: '请输入商家地址',
			trigger: ['change', 'blur']
		}],
		contact_tel: [{
			required: true,
			message: '请输入联系电话',
			trigger: ['change', 'blur']
		}, {
			pattern: /^1[3-9]\d{9}$/,
			message: '请检查手机号格式',
			trigger: ['change', 'blur'],
		}],
		longitude: [{
			required: true,
			message: '请输入地理经度',
			trigger: ['change', 'blur']
		}],
		latitude: [{
			required: true,
			message: '请输入地理纬度',
			trigger: ['change', 'blur']
		}],
		seller_image: [{
			required: true,
			message: '请上传门头照',
			trigger: ['change', 'blur']
		}],
		cert_list: [{
			required: true,
			message: '请上传相关资质证书',
			trigger: ['change', 'blur']
		}],
		hand_card: [{
			required: true,
			message: '请上传手持身份证照片',
			trigger: ['change', 'blur']
		}],
	}

	// 获取用户详情
	const getUserDetail = (type = '') => {
		getUserDetailApi(userInfo.value, type).then(res => {
			if (res.code == 0) {
				let obj = JSON.parse(JSON.stringify(res.data))
				obj.seller_image = obj.seller_image.split()
				obj.hand_card = obj.hand_card ? obj.hand_card.split() : []
				userInfo.value = obj
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		}).finally(() => {
			setTimeout(() => {
				isLoading.value = false
			}, 500)
		})
	}
	// 确定修改商家信息
	const submitForReview = () => {
		const obj = JSON.parse(JSON.stringify(userInfo.value))
		obj.seller_image = obj.seller_image.join().replace(new RegExp(domain_name, 'g'), '')
		obj.hand_card = obj.hand_card.join().replace(new RegExp(domain_name, 'g'), '')
		obj.cert_list = obj.cert_list.map(url => url.replace(new RegExp(domain_name, 'g'), ''))
		getUserDetailApi(obj, 'edit').then(res => {
			if (res.code == 0) {
				uni.showToast({
					title: res.message
				})
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		})
	}
</script>

<style scoped lang="scss">
</style>